<template>
  <div>
    <div class="top">
      <button @click="fn(5)">shanchu</button>
    </div>
    <div class="tables">
      <div class="item" v-for="item in 16" :key="item"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import welcome from "@/mock/welcome";

// mock数据
// 前端页面已经写好了，但是后端的接口还没有好，可以mock数据(前端自己编假数据)
// 1. 在线的fastmock
// 2. 在本地模拟数据

export default defineComponent({
  setup() {
    onMounted(async () => {
      const res = await welcome.getData({
        page: 1,
        size: 10,
      });
      console.log(res);
    });

    const fn = async (id: number) => {
      const res: any = await welcome.delData(id);
      if (res.status === 0) {
        const res = await welcome.getData({
          page: 1,
          size: 10,
        });
        console.log(res);
      }
    };

    return {
      fn,
    };
  },
});
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  height: 200px;
  background: blueviolet;
  border-radius: 10px;
}

.tables {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .item {
    width: 23%;
    height: 130px;
    background: lightgreen;
    margin-top: 20px;
  }
}
</style>
